<template>
  <div class="cart">
    <div class="cart-main noShop" v-if="cart.length === 0">
      <img src="http://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png" alt="">
      <P>该购物车内还没有东西</P>
    </div>
    <div class="cart-main" v-else>
      <van-swipe-cell
        v-for="shop in cart"
        :key="`shop-${shop.id}`"
      >
        <CartItem
          :id="shop.id"
          :title="shop.title"
          :price="shop.price"
          :count="shop.count"
          :check="shop.check"
          :originPrice="shop.originPrice"
          :photo="shop.photo"
        />
        <template #right>
          <van-button square text="删除" @click="delItem({ id: shop.id })" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <div class="cart-footer">
      <van-submit-bar :price="totalMoney * 100" button-text="提交订单" decimal-length=1>
        <van-checkbox :value="isAllCheck" @click="toggleAllCheck({ isAllCheck })">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations
} from 'vuex'
import CartItem from '@/components/CartItem'
export default {
  name: 'Cart',
  data () {
    return {
      checked: '',
      value: ''
    }
  },
  components: {
    CartItem
  },
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['totalMoney', 'isAllCheck'])
  },
  methods: {
    ...mapMutations(['toggleAllCheck', 'delItem'])
  }
}
</script>

<style lang="scss" scoped>
.cart {
  height: 100%;
  background-color: #eee;
  display: flex;
  flex-direction: column;
  .noShop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      margin-top: 20px;
    }
  }
  .delete-button {
    height: 100%;
  }
  .cart-main {
    flex: 1;
    padding: 0px 10px;
  }
  .van-submit-bar {
    position: static;
  }
}
.cart-footer {
  .van-submit-bar {
    bottom:50px;
    border-top: 1px solid;
    border-bottom:1px solid;
    border-color: #eeeeee;
  }
}
</style>
